<template>
  <div>
    <!-- 购物车 -->
    <div class="header">
      <div @click="$router.go(-1)">
        <img src="@/assets/images/detail/download.png" alt="" />
      </div>
      <div>购物车</div>
      <div class="header_r" @click="isShow = !isShow" v-if='isShow'>管理</div>
      <div class="header_r" @click="isShow = !isShow" v-else>编辑</div>
    </div>
    <div class="commit">
      <ul>
        <li v-for="(item, index) in artList" :key="index">
          <div class="checkbox">
            <div>
              <input type="checkbox" v-model="item.flag" @click="hdd(index)"/>
            </div>
            <img :src="item.imag" alt="" />
          </div>
          <div>
            <p class="name">{{ item.name }}</p>
            <p class="price">￥{{ item.price }}</p>
          </div>
          <span class="count">X{{ item.count }}</span>
          <div class="del" v-show="!isShow" @click="del(item, index)">删除</div>
        </li>
      </ul>
    </div>
    <div class="footer">
      <div class="left" >
        <img
          src="@/assets/images/detail/gou.png"
          alt=""
         @click="checkAllfn"
          :class="active ? 'active' : ''"
        />
        <span >全选</span>
      </div>
      <div class="center">合计{{ total }}</div>
      <div class="right" @click="$router.push('/order')">去结算{{ num }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
    //   列表
      artList: [],
      isShow: true,
    //   总价
      total: 0,
    //   全选框状态
      active: false,
      count: 0,
      all: 0,
       wnmm:0
    };
  },

  created() {
    // this.artList = this.$store.state.cartList;
     let liuyan = localStorage.liuyan;
    if (liuyan) {
      this.artList = JSON.parse(liuyan);
    }
    console.log(this.$store.state.cartList);
   console.log(this.artList);
  },

  methods: {
    del(item, index) {
      if (item.flag) {
        this.artList.splice(index, 1);
          if(item.flag){
            this.countMoney()
          }
      }
      
    },
    hdd(index){
        this.artList[index].flag=!this.artList[index].flag
        let sum = 0;
        this.artList.map((item)=>{
            if(item.flag){
                sum++
            }
        })
        // 改变全选框状态
        this.active=sum>=this.artList.length
        // 计算总价
        this.countMoney()
        // 更新
        this.$forceUpdate
    },
    // 全选
    checkAllfn(){
        this.active=!this.active;
        this.artList.map((item)=>{
            item.flag=this.active
        })
         this.countMoney()
    },
    countMoney(){
        this.total=0,
        this.num=0,
        this.artList.map(item=>{
            if(item.flag){
                this.total += item.price*item.count
                this.num +=item.count
            }
        })
    }
   
  },
};
</script>
 
<style lang = "less" scoped>
.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 8vw;
  border-bottom: 1px solid #9999;
  .header_r {
    margin-right: 5vw;
  }
  img {
    width: 4vw;
    height: 4vw;
    margin-left: 5vw;
  }
}
.commit {
  width: 100%;
  height: 16vw;
  li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1vw 2vw;
    border: 1px solid #9999;
    font-size: 2.5vw;
    .del {
      width: 10%;
      height: 4vw;
      /* border: 1px solid #000; */
      text-align: center;
      line-height: 4vw;
      font-size: 2.5vw;
      background: red;
      border-radius: 5px;
    }
    .name {
      color: #9999;
      font-size: 2vw;
    }
  }
  .checkbox {
    display: flex;
  }
  img {
    width: 14vw;
    height: 14vw;
    vertical-align: middle;
  }
  .price {
    color: yellow;
    margin-top: 3vw;
  }
}
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 4vw;
  height: 9vw;
  /* border: 1px solid #000; */
  padding: 0 0 0 2%;
  background: #eeeeee;
  border-bottom: 2px solid #eeeeee;

  width: 100%;
  position: fixed;
  left: 0;
  bottom: 15vw;

  img {
    width: 4vw;
    height: 4vw;
    vertical-align: middle;
  }
  .left {
    width: 20%;

    .active {
      background: rgb(245, 93, 93);
    }
  }
  .center {
    width: 20%;
  }
  .right {
    width: 25%;
    background: red;
    height: 100%;
    text-align: center;
    line-height: 9vw;
    color: #fff;
  }
}
</style>